
:root {
    --navbar-menu-background: var(--base-background-color);
}

body {
    overflow: overlay;
}

.sidebar-toggle {
    width: auto;
    cursor: pointer;
}

.markdown-section,
.cover-main,
.sidebar {
    h1, h2, h3, h4, h5, h6 {
        a[aria-hidden] {
            font-weight: 600;
            line-height: 1em;
            padding-left: 10px;
            font-style: normal;
            text-decoration-line: none;
            opacity: 0;
            transition: opacity .25s ease-in-out;
        }

        &:hover a[aria-hidden] {
            opacity: 0.4;
            &:hover {
                opacity: 1;
            }
        }
    }

    ul li.active>a {
        border-right: 2px solid;
        color: var(--sidebar-nav-link-color--hover, var(--sidebar-nav-link-color));
        font-weight: 400;

        &.active {
            border-right: 2px solid;
            color: var(--sidebar-nav-link-color--active, var(--sidebar-nav-link-color));
            font-weight: 600;
        }
    }

    strong {
        font-weight: 700;
    }

    span.badge, em.badge, strong.badge, code.badge {
        display: inline-block;
        vertical-align: top;
        font-size: 0.9em;
        line-height: 1em;
        border-radius: 0.6em;
        padding: 0.1em 0.5em;
        color: #fff;
        margin-right: 0.4em;
        font-family: inherit;

        &.warn {
            background: var(--notice-warn-border-color, #d58181);
        }

        &.tip {
            background: var(--notice-tip-border-color, #f66);
        }

        &.note {
            background: var(--notice-note-border-color, #6bb1e0);
        }

        &.info {
            background: var(--notice-info-border-color, #f1b37e);
        }
    }

    .custom-block {
        &.notice {
            .custom-block-heading {
                font-size: 1.2rem;
                margin: 0;
                color: rgb(132, 146, 166);
            }

            .custom-block-body > p {
                margin: 0;
            }
        }

        &.example, &.playground {
            display: block;
            border: 1px solid var(--theme-color-secondary-light, #eaeefb);
            border-radius: 4px;
            padding: 1em 1em 0 1em;

            pre {
                margin: .5em -1em 0;
                padding: 1em;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            details {
                summary {
                    margin-bottom: 1em;
                    opacity: 0.5;
                    outline: none;
                    cursor: pointer;

                    &:hover {
                        opacity: 1;
                    }
                }

                &[open] {
                    summary {
                        opacity: 0.8;

                        &:hover {
                            opacity: 1;
                        }
                    }
                }
            }
        }

        &.figure, &.caption {
            position: relative;
            padding: 1.5em 1.5em 3em 1.5em;
            display: table; // hack to clear element
            border: none;
            margin: 1.5em auto;

            .custom-block-heading {
                width: 100%;
                text-align: center;
                margin: 0.5em;
                margin-bottom: 0.5em;
            }
        }

        &.figure .custom-block-heading {
            position: absolute;
            left: 0;
            bottom: 1.5em;
        }

        &.grid table {
            margin-top: 10px;
            width: 100%;
            table-layout: fixed;

            > * > tr > td {
                vertical-align: top;
            }
        }
    }

    // Move to markdown module
    .custom-block.notice, p {
        &.note, &.info, &.tip, &.warn {
            background-color: var(--notice-background, #f8f8f8);
            border-left: var(--notice-border-width, 4px) solid var(--theme-color,#42b983);
            border-bottom-right-radius: 2px;
            border-top-right-radius: 2px;
            margin: 2em 0;	
            padding: 12px 24px 12px 30px;	
            position: relative;
        }

        &.note {	
            border-left-color: var(--notice-note-border-color, #6bb1e0);	
        }	

        &.info {	
            border-left-color: var(--notice-info-border-color, #f1b37e);	
        }	

        &.tip {		
            border-left-color: var(--notice-tip-border-color, #f66);	
        }	

        &.warn {	
            border-left-color: var(--notice-warn-border-color, #d58181);	
        }
    }

    // Move to markdown module
    p {
        &.info, &.note, &.tip, &.warn {
            &:before {
                background-color: #f66;
                border-radius: 100%;
                color: #fff;
                content: "!";
                font-family: Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;
                font-size: 14px;
                font-weight: 700;
                left: -12px;
                line-height: 20px;
                position: absolute;
                height: 20px;
                width: 20px;
                text-align: center;
                top: 14px;
            }
        }

        &.info:before {
            background: var(--notice-info-border-color, #f1b37e);
            content: "i";
        }

        &.note:before {
            background: var(--notice-note-border-color, #6bb1e0);
            content: "✓";
            font-size: 0.8em;
            margin-top: 0.2em;
        }

        &.tip:before {
            background: var(--notice-tip-border-color, #f66);
            content: "!";
        }

        &.warn:before {
            background: var(--notice-warn-border-color, #d58181);
            content: "‼";
        }

    }

    blockquote {
        &.info, &.tip, &.warn {
            p {
                padding: 0;
                margin: 0;
            }
        }
    }

    pre.linenos code {
        counter-reset: line;

        span[data-line] {
            display: inline-block;

            &:before {
                min-width: 20px;
                counter-increment: line;
                content: counter(line);
                display: inline-block;
                border-right: 1px solid #ddd;
                padding: 0 .5em;
                margin-right: .5em;
                color: #888
            }
        }
    }

    .line-highlight {
        display: inline-block;
        width: 100%;
        background: hsla(24, 20%, 50%,.08);
        background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
    }
}

// Sidebars

main > ion-content > .content {
    left: var(--sidebar-width, 300px);
    right: var(--right-sidebar-width, 300px);
}

.sidebar {
    background-color: var(--sidebar-background, unset);
    .sidebar-nav {
        display: block;
        padding-right: 5px;
        ul li {
            padding: 0 0 0 1rem;
            &.active {
                background: var(--sidebar-nav-link-background--active, var(--sidebar-nav-link-background));
                border-style: var(--sidebar-nav-link-border-style--active, var(--sidebar-nav-link-border-style));
                border-color: var(--sidebar-nav-link-border-color--active, var(--sidebar-nav-link-border-color));
                color: var(--sidebar-nav-link-color--active, var(--sidebar-nav-link-color));
                text-decoration: var(--sidebar-nav-link-text-decoration--active, var(--sidebar-nav-link-text-decoration));
                text-decoration-color: var(--sidebar-nav-link-text-decoration-color--active, var(--sidebar-nav-link-text-decoration-color));
            }
            &:hover > a {
                background: var(--sidebar-nav-link-background--hover, var(--sidebar-nav-link-background));
                border-style: var(--sidebar-nav-link-border-style--hover, var(--sidebar-nav-link-border-style));
                border-color: var(--sidebar-nav-link-border-color--hover, var(--sidebar-nav-link-border-color));
                color: var(--sidebar-nav-link-color--hover, var(--sidebar-nav-link-color));
                text-decoration: var(--sidebar-nav-link-text-decoration--hover, var(--sidebar-nav-link-text-decoration));
                text-decoration-color: var(--sidebar-nav-link-text-decoration-color--hover, var(--sidebar-nav-link-text-decoration-color));
            }
        }
    }

    > * > h1 {
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        font-weight: 300;
        text-align: center;
    }
}

.sidebar.left-sidebar {
    width: var(--sidebar-width, 300px);
    transition: transform var(--sidebar-transition-duration, 250ms) ease-out;
    border-right: var(--sidebar-border-width, unset) solid var(--sidebar-border-color, unset);
    left: auto;
}

.sidebar.right-sidebar {
    background-color: var(--right-sidebar-background, unset);
    border-left: var(--right-sidebar-border-width, unset) solid var(--right-sidebar-border-color, unset);
    overflow-y: auto;
    padding: 60px 0 0 10px;
    position: absolute;
    left: initial;
    top: 0;
    bottom: 0;
    right: 0;
    transition: transform var(--sidebar-transition-duration, 250ms) ease-out;
    width: var(--right-sidebar-width, 300px);
    z-index: 20;
    transform: translateX(0);
}

section.cover {
    padding: calc(var(--cover-border-inset, 0px) + var(--cover-border-width, 0px));
    background: var(--cover-background-color);
    min-height: 100vh;
    height: unset;
    color: var(--cover-color, inherit);
    text-align: var(--cover-text-align, center);
    align-items: unset;
}

section.cover.show {
    transition: transform var(--sidebar-transition-duration, 250ms) ease-out;
}

main > ion-content > .content {
    transition: left var(--sidebar-transition-duration, 250ms) ease, right var(--sidebar-transition-duration, 250ms) ease;
}

ion-content {
    left: 0;
}

body.close {
    .sidebar.left-sidebar {
        transform: translateX(-100%);
    }

    .sidebar.right-sidebar {
        transform: translateX(100%);
    }

    .content {
        left: 0;
        right: 0;
    }
}

@media print {
    #_hj_feedback_container,
    .markdown-section > * > div[style],
    .docsify-pagination-container {
        display: none !important;
    }

    /* Setting content width, unsetting floats and margins */
    #main {
        width: 100%;
        margin: 0;
        float: none;
        max-width: 100%;
    }

    .content {
        left: 0 !important;
        right: 0 !important;
    }

    /** Setting margins */
    @page {
        margin: 2.8cm 2.2cm 2.2cm 2.6cm;
    }

    /* Set font to 16px/13pt, set background to white and font to black.*/
    /* This saves ink */
    body {
        font-size: 13pt;
        line-height: 1.3;
        background: #fff !important;
        color: #000;
    }

    h1 {
        font-size: 24pt;
    }

    h2,
    h3,
    h4 {
        font-size: 14pt;
        margin-top: 25px;
    }

    /* Defining all page breaks */
    a {
        page-break-inside: avoid;
    }
    blockquote {
        page-break-inside: avoid;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    img {
        page-break-inside: avoid;
        page-break-before: avoid;
        max-width: 65%;
    }

    table,
    pre {
        page-break-inside: avoid;
    }
    ul,
    ol,
    dl {
        page-break-before: avoid;
    }
    article.print-page {
        page-break-inside: avoid;
        page-break-after: always;
        break-after: always;
    }

    /* Displaying link color and link behaviour */
    a:link,
    a:visited,
    a {
        background: transparent;
        color: #520;
        font-weight: bold;
        text-decoration: underline;
        text-align: left;
    }

    a {
        page-break-inside: avoid;
    }

    a[href^='http']:after {
        content: ' < ' attr(href) '> ';
    }

    a:after > img {
        content: '';
    }

    article a[href^='#']:after {
        content: '';
    }

    a:not(:local-link):after {
        content: ' < ' attr(href) '> ';
    }

    /**
     * Making intergated videos disappear, and removing the iframes' whitespace to zero. 
     */
    .entry iframe, ins {
        display: none;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        line-height: 0pt !important;
        white-space: nowrap;
    }
    .embed-example,
    .embed-youtube,
    .embed-responsive,
    embed-stackblitz {
        position: absolute;
        height: 0;
        overflow: hidden;
    }

    .embed-plnkr {
        display: none;
    }

    details > summary {
        display: none;
    }

    .custom-block {
        page-break-inside: avoid;
        page-break-before: avoid;
    }

    ngx-loading-bar {
        display: none !important;
    }

    img {
        max-width: 95%;
    }

}

@media screen and (min-width: 768px) {
    .markdown-section  {
        max-width: 850px;
    }
}
@media screen and (max-width: 768px) {
    section.cover.show {
        z-index: 100;
    }
    .markdown-section  {
        max-width: 100%;
    }
    main {
        z-index: 200;
        width: 100%;
    }

    body.close .sidebar-toggle {
        background-color: transparent;
    }

    .sidebar-toggle {
        background-color: transparent;
    }

    .content,
    body.close .content {
        left: 0;
        right: 0;
        transform: translateX(0);
    }

    .sidebar.right-sidebar {
        /* transform: translateX(100%); */
        display: none;
    }

    .sidebar-toggle {
        background-color: transparent;
    }
}

// Theme support
body  {
    .docsify-copy-code-button {
        &, &:after {
            background: var(--copycode-background, #ccc);
            color: var(--copycode-color, #fff);      
        }
    }

    .medium-zoom-overlay {
        background: var(--zoomimage-overlay-background, rgb(255, 255, 255)) !important;
    }
}

// TODO: Move to the module
.custom-block.tabs {
    margin: .5em 0;

    > .custom-block-heading {
        padding: 5px;
        border: 1px solid lightgrey;
        border-bottom: none;
    }

    > .custom-block-body {
        position: relative;
        border: 1px solid lightgrey;

        .tab {
            height: 2.5em;

            .custom-block-heading {
                padding: 10px;
                width: 100px;
                display: inline-block;
                height: 100%;
                top: 0;
                left: 0;
                background-color: none;
                border-top: 1px solid lightgrey;
                border-right: 1px solid lightgrey;
                cursor: pointer;
                // background: linear-gradient(to left bottom, hsl(211, 100%, 85%) 0%,hsl(169, 100%, 85%) 100%);
                color: var(--theme-color, #0074d9);
            }

            &:first-child .custom-block-heading {
                border-top: none;
            }

            .custom-block-body {
                position: absolute;
                top: 0;
                left: 100px;
                padding: 10px;
                opacity: 0;
                height: 100%;
                width: calc(100% - 100px);
                transition: opacity .1s ease-in-out;
            }

            &[data-state="open"] {
                .custom-block-heading {
                    // background-color: var(--theme-color, #0074d9);
                    border-right: 3px solid var(--theme-color, #0074d9);
                    // color: #fff;
                    // transform: scale(1.07);
                }

                .custom-block-body {
                    opacity: 1;
                }
            }

        }
    }
}

// TODO: Move to the component
md-toc.collapsible {
    display: block;

    ul > li > ul {
        overflow: hidden;
        line-height: 0;
        opacity: 0;
        transition: line-height 0.2s ease-in-out, opacity 0.4s ease-in-out;
    }

    ul > li.active > ul {
        opacity: 1;
        line-height: 2;
    }
}

.icon.icon-link:after,
i.material-icons {
    // required
    font-family: 'Material Icons';
    font-feature-settings: 'liga';
    font-weight: normal;
    font-style: normal;
    vertical-align: middle;
    display: inline-block;
    // resetters
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    // optimizers
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

i.material-icons:not([class*=" md-"]) {
    font-size: 1em;
    line-height: inherit;
    padding-bottom: 0.1em;
}

.icon.icon-link:after {
    font-family: 'Material Icons';
    content: "link";
    font-size: 0.8em;
    vertical-align: middle;
}


// TODO: make themeable (https://jhildenbiddle.github.io/docsify-themeable/#/customization?id=search)
div.search {
    margin-bottom: 10px;
    padding: 6px;

    .input-wrap {
        display: flex;
        align-items: center;

        input {
            outline: none;
            border: none;
            width: 100%;
            padding: 0px 25px 0px 7px;
            line-height: 36px;
            font-size: 14px;
            appearance: none;
        }

        ion-icon {
            margin-left: -25px;
            text-align: right;

            svg {
                transform: scale(.5);
            }

            cursor: pointer;
        } 

        ion-button {
            width: 36px;
        }

    }

    .results-panel {
        display: block;
    }

    h2 {
        font-size: 17px;
        margin: 10px 0 0 0;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    .matching-post {
        border-bottom: 1px solid #eee;
    }

    .matching-post:last-child {
        border-bottom: 0;
    }

    p {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    p.empty {
        text-align: center;
    }
}
